<template>
	<div class="srarch">
		<el-autocomplete
			clearable
			placeholder="请输入医院名称"
			v-model="hosname"
			:fetch-suggestions="fetchSuggestions"
			:trigger-on-focus="false"
			@select="onselect" />
		<el-button type="primary" :icon="Search" />
	</div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { getHospitalInfoByName } from '@/api/home';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

let hosname = ref('');

function fetchSuggestions(queryString: string, callback: Function) {
	getHospitalInfoByName(queryString).then((res) => {
		callback(
			res.data.map((o) => {
				return {
					value: o.hosname,
					hoscode: o.hoscode,
				};
			})
		);
	});
}

function onselect(item: any) {
	router.push({
		path: '/hospital',
		query: {
			hoscode: item.hoscode,
		},
	});
}
</script>

<style scoped lang="scss">
.srarch {
	margin: 20px 0 10px 0;
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	:deep(.el-input__wrapper) {
		width: 600px;
		margin-right: 10px;
	}
}
</style>
